import type { NextPage } from "next";
import "./styles.css";
import { getSortedPostData } from "@/utils/resolveMarkdown";
import PictureCard from "@/components/Common/Card/PictureCard";

const Home: NextPage = async () => {
  const allPostsData = await getSortedPostData();
  return (
    <div className="max-w-7xl mx-auto grid gap-4 grid-cols-1 my-4 lg:grid-cols-2 xl:grid-cols-3 px-4 py-4 lg:px-10 xl:pt-8">
      {allPostsData.map(({ id, date, title, bgImgPath, discription, tags }) => (
        <div key={id}>
          <PictureCard
            text={discription}
            tags={tags}
            title={title}
            imageUrl={bgImgPath}
            linkUrl={`/article/${id}`}
            date={date}
          />
        </div>
      ))}
    </div>
  );
};

export default Home;
